<template>
  <div class="buymedicine">
    <!-- 在家购药头部 -->
    <van-nav-bar
      title="在家购药 享200减15优惠"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-image
          :src="require('../assets/buymedicine/share.png')"
          width="22px"
          height="22px"
        />
      </template>
    </van-nav-bar>
    <!-- 广告图 -->
    <img src="../assets/buymedicine/banner.png" alt="" />
    <!-- 购物券 -->
    <div class="coupon">
      <div class="sale-one" v-for="(item, index) in coupon" :key="index">
        <ul class="title">
          <span class="vouchers">{{ item.vouchers }}</span>
          <ul class="price">
            <span class="sign">{{ item.sign }}</span>
            <span class="num">{{ item.num }}</span>
          </ul>
          <p class="full">{{ item.full }}</p>
          <p class="date">{{ item.date }}</p>
        </ul>
        <button>{{ item.button }}</button>
      </div>
    </div>
    <!-- 分割线 -->
    <p class="split">- 该券仅限中药处方使用，领取后在处方付款页面直接抵扣 -</p>
    <!-- 分类 -->
    <div class="classify">
      <van-grid :column-num="5" :border="false">
        <van-grid-item
          v-for="(item, index) in classify"
          :key="index"
          :icon="item.imgurl"
          :text="item.name"
        />
      </van-grid>
    </div>
    <!-- 推荐 -->
    <div class="recommend">
      <ul>
        <li class="doctor">
          医生在线
          <span>0元咨询开药<van-icon name="arrow" /></span>
        </li>
        <li class="mdica">
          全职医生在线
          <span>24h紧急咨询<van-icon name="arrow" /></span>
        </li>
        <li class="run-on">
          限时抢购
          <span>爆款好药</span>
        </li>
        <li class="reassure">
          名医推荐
          <span>好药放心购</span>
        </li>
      </ul>
    </div>
    <!-- 产品 -->
    <van-tabs v-model="active" type="card">
      <van-tab title="男科用药">
        <div class="male-drug">
          <div class="pills">
            <p>限时特惠]同仁堂六味地黄丸360丸水蜜丸补肾阴虚腰膝酸软</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">15</span>
                <span class="original">¥38</span>
              </div>
              <button>购买</button>
            </div>
          </div>
          <div class="capsule">
            <p>金水宝 金水宝胶囊0.33g*9粒*12板/盒</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">95</span>
                <span class="original">¥165</span>
              </div>
              <button>购买</button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="妇科用药">
        <div class="male-drug">
          <div class="pills">
            <p>限时特惠]同仁堂六味地黄丸360丸水蜜丸补肾阴虚腰膝酸软</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">15</span>
                <span class="original">¥38</span>
              </div>
              <button>购买</button>
            </div>
          </div>
          <div class="capsule">
            <p>金水宝 金水宝胶囊0.33g*9粒*12板/盒</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">95</span>
                <span class="original">¥165</span>
              </div>
              <button>购买</button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="消化用药">
        <div class="male-drug">
          <div class="pills">
            <p>限时特惠]同仁堂六味地黄丸360丸水蜜丸补肾阴虚腰膝酸软</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">15</span>
                <span class="original">¥38</span>
              </div>
              <button>购买</button>
            </div>
          </div>
          <div class="capsule">
            <p>金水宝 金水宝胶囊0.33g*9粒*12板/盒</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">95</span>
                <span class="original">¥165</span>
              </div>
              <button>购买</button>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="皮肤用药">
        <div class="male-drug">
          <div class="pills">
            <p>限时特惠]同仁堂六味地黄丸360丸水蜜丸补肾阴虚腰膝酸软</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">15</span>
                <span class="original">¥38</span>
              </div>
              <button>购买</button>
            </div>
          </div>
          <div class="capsule">
            <p>金水宝 金水宝胶囊0.33g*9粒*12板/盒</p>
            <div class="text">
              <div class="price">
                <span class="sign">¥</span>
                <span class="num">95</span>
                <span class="original">¥165</span>
              </div>
              <button>购买</button>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <!-- 知名企业 -->
    <div class="enterprise">
      <h6>全国知名合作药企<span>大三甲医院供货商</span></h6>
      <ul>
        <li><img src="../assets/buymedicine/Sinopharm.png" alt="" /></li>
        <li><img src="../assets/buymedicine/Hitek.png" alt="" /></li>
        <li><img src="../assets/buymedicine/Atopalm.png" alt="" /></li>
        <li><img src="../assets/buymedicine/Laboratoires.png" alt="" /></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coupon: [
        {
          vouchers: "商城券",
          sign: "¥",
          num: "5",
          full: "满99元可用",
          date: "2021.06.01 - 2021.06.30",
          button: "立即领取",
        },
        {
          vouchers: "商城券",
          sign: "¥",
          num: "15",
          full: "满200元可用",
          date: "2021.06.01 - 2021.06.30",
          button: "立即领取",
        },
      ],
      classify: [
        {
          imgurl: require("../assets/buymedicine/cold.png"),
          name: "感冒发烧",
        },
        {
          imgurl: require("../assets/buymedicine/dermatitis.png"),
          name: "皮炎湿疹",
        },
        {
          imgurl: require("../assets/buymedicine/dyspepsia.png"),
          name: "消化不良",
        },
        {
          imgurl: require("../assets/buymedicine/impotence.png"),
          name: "阳痿早泄",
        },
        {
          imgurl: require("../assets/buymedicine/vaginitis.png"),
          name: "阴道炎",
        },
        {
          imgurl: require("../assets/buymedicine/diabetes.png"),
          name: "糖尿病",
        },
        {
          imgurl: require("../assets/buymedicine/hypertensio.png"),
          name: "高血压",
        },
        {
          imgurl: require("../assets/buymedicine/Menoxenia.png"),
          name: "月经不调",
        },
        {
          imgurl: require("../assets/buymedicine/asthmatics.png"),
          name: "化痰止咳",
        },
        {
          imgurl: require("../assets/buymedicine/deficien.png"),
          name: "气血两虚",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.buymedicine {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  overflow-x: scroll;
  white-space: nowrap;

  ::-webkit-scrollbar {
    width: 0 !important;
  }

  ::-webkit-scrollbar {
    width: 0 !important;
    height: 0;
  }
  // 头部
  /deep/ .van-nav-bar .van-icon {
    color: #000;
  }
  // 广告图
  img {
    width: 375px;
    height: 145.5px;
  }
  // 代金券
  .coupon {
    display: flex;
    justify-content: space-evenly;
    div {
      width: 175px;
      height: 137.5px;
      background-image: url("../assets/buymedicine/coupon.png");
      background-size: 175px 137.5px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      position: relative;
      .vouchers {
        color: #fefefe;
        font-size: 11px;
        background: #439ce0;
        padding: 2px 3px;
        border-radius: 6px 0 6px 0;
        position: absolute;
        top: 1px;
        left: 1px;
        z-index: 999;
      }
      ul {
        text-align: center;
        .sign {
          font-size: 11px;
          color: #fefefe;
          font-weight: bold;
        }
        .num {
          font-size: 24px;
          color: #fefefe;
          font-weight: bold;
        }
      }

      .full {
        width: 100%;
        margin: 0;
        text-align: center;
        font-size: 11.5px;
        color: #fefefe;
      }
      .date {
        margin: 0;
        text-align: center;
        font-size: 11px;
        color: #fefefe;
      }
      button {
        width: 138px;
        height: 27.5px;
        background: #fff;
        border: none;
        border-radius: 14px;
        color: #3ca9ff;
        font-size: 12.5px;
        font-family: "黑体";
        font-weight: 900;
      }
    }
  }
  // 分割线
  .split {
    width: 100%;
    text-align: center;
    font-size: 9px;
    color: #999999;
  }
  // 分类
  /deep/ .van-grid-item__content {
    padding: 8px 6px;
  }
  /deep/ .van-icon__image {
    width: 60px;
    height: 50px;
  }
  // 推荐
  .recommend {
    ul {
      margin-top: 25px;
      height: 230px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      li {
        font-size: 14px;
        color: #333333;
        font-weight: 900;
        display: flex;
        // font-family: "黑体";
      }
      .doctor {
        width: 150px;
        height: 82.5px;
        background-image: url("../assets/buymedicine/doctor.png");
        background-size: 166px 82.5px;
        align-content: center;
        flex-wrap: wrap;
        padding-left: 16px;
        span {
          width: 166px;
          color: #5e89cf;
          font-size: 11.5px;
          font-weight: bold;
        }
      }
      .mdica {
        width: 150px;
        height: 82.5px;
        background-image: url("../assets/buymedicine/mdica.png");
        background-size: 166px 82.5px;
        align-content: center;
        flex-wrap: wrap;
        padding-left: 16px;
        span {
          width: 166px;
          color: #7668c1;
          font-size: 11.5px;
          font-weight: bold;
        }
      }
      .run-on {
        width: 137px;
        height: 94px;
        background-image: url("../assets/buymedicine/run-on.png");
        background-size: 165px 126px;
        padding: 16px 14px;
        span {
          width: 60.5px;
          height: 16.5px;
          text-align: center;
          color: #ffffff;
          font-size: 10.5px;
          background: #e58d81;
          border-radius: 8.25px;
          margin-left: 5px;
        }
      }
      .reassure {
        width: 137px;
        height: 94px;
        background-image: url("../assets/buymedicine/reassure.png");
        background-size: 165px 126px;
        padding: 16px 14px;
        span {
          width: 70px;
          height: 16.5px;
          text-align: center;
          color: #ffffff;
          font-size: 10.5px;
          background: #79d9b9;
          border-radius: 8.25px;
          margin-left: 5px;
        }
      }
    }
  }
  // 产品
  /deep/ .van-tabs__wrap {
    width: 100%;
    height: 44px;
  }
  /deep/ .van-tabs__nav {
    height: 44px;
    border: none;
    margin: 0;
  }
  /deep/ .van-tab {
    width: 93.5px;
    height: 44px;
    border: none;
  }
  /deep/ .van-tab__text {
    color: #666;
  }
  /deep/ .van-tab--active {
    background: #6e95b6;
    span {
      color: #fff;
    }
  }
  .male-drug {
    display: flex;
    justify-content: space-evenly;
    p {
      width: 149px;
      height: 36px;
      font-size: 13.5px;
      font-weight: 900;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      margin: 0;
    }
    .pills {
      width: 174.5px;
      height: 281px;
      background-image: url("../assets/buymedicine/Pills.png");
      background-size: 174.5px 281px;
      display: flex;
      align-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
    .capsule {
      width: 174.5px;
      height: 281px;
      background-image: url("../assets/buymedicine/capsule.png");
      background-size: 174.5px 281px;
      display: flex;
      align-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
    }
    button {
      width: 44.5px;
      height: 20.5px;
      text-align: center;
      font-size: 12px;
      color: #fff;
      background: #f33648;
      border-radius: 10.25px;
      border: none;
      margin-right: 15px;
    }
    .sign {
      color: #f51a31;
      font-size: 12px;
      font-weight: bold;
    }
    .num {
      color: #f51a31;
      font-size: 18px;
      font-weight: bold;
    }
    .original {
      color: #666;
      font-size: 12px;
      font-weight: 900;
      text-decoration: line-through;
    }
    .text {
      width: 100%;
      padding: 10px 0;
      display: flex;
      justify-content: space-between;
    }
    .price {
      display: flex;
      align-items: center;
    }
  }
  // 知名企业
  .enterprise {
    width: 347px;
    height: 116.5px;
    background: #f9f9f9;
    border-radius: 10px;
    margin: 10px auto 30px;
    h6 {
      height: 14px;
      margin: 0 16.5px;
      padding-top: 17px;
      font-size: 14px;
      color: #333333;
      font-family: "黑体";
      display: flex;
      span {
        display: block;
        color: #fff;
        background: #81c9ff;
        border-radius: 8.25px;
        width: 101.5px;
        height: 16.5px;
        line-height: 16.5px;
        text-align: center;
        font-size: 10.5px;
        margin-left: 8px;
      }
    }
    ul {
      width: 100%;
      height: 90px;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      li {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 44px;
          height: 35px;
        }
      }
    }
  }
}
</style>
